<template>
	<view class="index1_content">
		<!-- 公司名称 -->
		<view class="index1_headers">
			<template v-if="userInfo.avatar">
				<u-avatar v-if="userInfo.avatar.indexOf('uploads')>-1" :src="IMAGE_URL+userInfo.avatar"></u-avatar>
				<u-avatar v-else :src="userInfo.avatar"></u-avatar>
			</template>

			<!-- 		<image style="width: 100rpx;height: 100rpx;border-radius: 24rpx;border: 1rpx solid #FFFFFF;"
				src="@/static/m1.png" mode=""></image> -->
			<view class="index1_headers1">
				<view class="ov fz32 cfff">Hello，{{nickname}}</view>
				<div class="flex">
					<view class="role-tag">{{$t('货代公司')}}</view>
				</div>
			</view>
		</view>

		<!-- 仓库 -->
		<view class="index1_ck">
			<view class="index1_ck_flex" @click="go('/pages/tabbar/order/warehouseManagement')">
				<view class="index1_ck_imgblock">
					<image style="width: 60rpx;height: 60rpx;" src="@/static/index2/index2.png" mode="">
				</view>
				<view :class="lang=='zh'?'textBlock btn-name':'textBlock_ru btn-name'">{{$t('仓库管理')}}</view>
			</view>
			<view class="index1_ck_flex" @click="go('/pages/tabbar/order/entryAndexitDetails')">
				<view class="index1_ck_imgblock">
					<image style="width: 60rpx;height: 60rpx;" src="@/static/index2/index4.png" mode="">
				</view>
				<view :class="lang=='zh'?'textBlock btn-name':'textBlock_ru1 btn-name'">{{$t('仓库货物')}}</view>
			</view>
			<view class="index1_ck_flex" @click="go('/pages/tabbar/order/entryAndexit')">
				<view class="index1_ck_imgblock">
					<image style="width: 60rpx;height: 60rpx;" src="@/static/index2/index1.png" mode="">
				</view>
				<view :class="lang=='zh'?'textBlock btn-name':'textBlock_ru btn-name'">{{$t('货物入库')}}</view>
			</view>
			<view class="index1_ck_flex" @click="go('/pages/tabbar/order/costMaintenance')">
				<view class="index1_ck_imgblock">
					<image style="width: 60rpx;height: 60rpx;" src="@/static/index2/index3.png" mode="">
				</view>
				<view :class="lang=='zh'?'textBlock btn-name':'textBlock_ru btn-name'">{{$t('费用维护')}}</view>
			</view>
		</view>

		<!-- 推荐资源 -->
		<view class="index1_tjzy">
			<view class="flex fz32">
				<image style="width: 40rpx;height: 40rpx;margin-right: 8rpx;" src="@/static/index2/22261x.png" mode="">
					<span>{{$t('推荐资源')}}</span>
			</view>
			<view class="flex fz28" @click="go('/pages/tabbar/order/index')">
				<span>{{$t('我的订单')}}</span>
				<image style="width: 15rpx;height: 30rpx;margin-left: 8rpx;" src="@/static/index2/index5.png" mode="">
			</view>
		</view>

		<!-- 货源信息-车源信息 -->
		<view class="index1_hycy">
			<view @click="itemIndex=index;getData(true)" :class="index===itemIndex?'item-buts':'item-buts-active'"
				v-for="(item,index) in listBut" :key="index">{{$t(item)}}</view>
		</view>

		<!-- 模块 -->
		<view class="list_block">
			<scroll-view scroll-y="true" refresher-enabled="true" :refresher-triggered="freshIsShow" class="scroll-Y"
				@scrolltolower="lower" @refresherrefresh="fresh" @refresherrestore="store"
				refresher-background="background: linear-gradient(90deg, #E0E8F5 -2%, #E5EFF2 105%);">
				<template v-for="(item,index) in arr">
					<pushItem @handeleUninterested="handeleUninterested" @handeleCommunicate="handeleCommunicate"
						:index="index" :item="item" :key="item.id" :itemIndex="itemIndex" />
				</template>

				<template v-if="arr.length===0">
					<view style="margin-top: 150rpx;">
						<u-empty :text="$t('数据为空')" mode="list"></u-empty>
					</view>
				</template>
				<view v-if="arr.length!=0&&arr.length===total" class="Currently-unavailable"
					style="color:#999;font-size: 24rpx;">
					没有更多了
				</view>
				<view style="height: 200rpx;"></view>
			</scroll-view>
		</view>

		<vipPopup v-if="vipShow" :show="vipShow" @handeleVip="clickVipPopup" />

		<!-- 顶部背景色 -->
		<image style="width: 750rpx;height: 690rpx;position: absolute;top: 0;z-index: 1;"
			src="@/static/index2/20241101130857.png" mode=""></image>

	</view>
</template>

<script>
	import pushItem from "./goods/pushItem.vue"
	//VIP弹窗
	import vipPopup from "@/components/vipPopup/index.vue";
	import {
		createC2CConversation,
		isBase64,
		time
	} from "@/common/public";

	import {
		IMAGE_PIC,
		IMAGE_URL
	} from '@/config/app';
	export default {
		components: {
			vipPopup,
			pushItem
		},
		data() {
			return {
				IMAGE_PIC,
				IMAGE_URL,
				nickname: uni.getStorageSync("nickname"),
				user_id: uni.getStorageSync('user_id'),
				itemIndex: 0,
				freshIsShow: true,
				arr: [],
				lang: uni.getStorageSync("lang"),
				listBut: ['货源信息', '车源信息'],
				type: 'textarea',
				page: 1,
				limit: 20,
				id: '',
				Current_index: '', //当前下标
				total: 0,
				vip: false,
				vipShow: false,
				userInfo: {}
			}
		},
		created() {
			this.getData()
			this.getUserInfo()
		},

		methods: {
			async getUserInfo() {
				var userinfo = "";
				const that = this;
				const {
					deviceBrand,
					deviceModel,
					deviceId,
					osName,
					osVersion
				} = uni.getSystemInfoSync();
				console.log(deviceBrand, deviceModel, deviceId, osName, osVersion)
				userinfo = deviceBrand + ',' + deviceModel + ',' + deviceId + ',' + osName + ',' + osVersion
				let user = await this.$u.api.user.getUserInfo({
					userinfo: userinfo
				});
				this.userInfo = user;
			},
			go(url) {
				uni.navigateTo({
					url
				})
			},
			// 隐藏vip弹窗
			clickVipPopup() {
				console.log('隐藏');
				this.vipShow = false //点击vip弹窗隐藏
			},
			//参与竞标
			handeleWanttobuy(item) {
				// 先判断手机号，如果使自己手机号，自己不能和参与
				var mobile = uni.getStorageSync('mobile');
				if (mobile === item.user.mobile) {
					this.$u.toast(this.$t('不能参与自己'));
					return
				}
				this.$u.api.user.order_join_day_auth({
					lang: this.lang
				}).then(res => {
					if (res == 1) {
						//参与竞标
						uni.navigateTo({
							url: '/pages/order/process/buildOrder?release_id=' + item.id + '&type=' +
								'goods'
						})
					} else {
						if (this.vip) {
							this.vipShow = true
							return
						} else {
							uni.showModal({
								content: this.$t('您的权限不足哦!请联系工作人员!'),
								showCancel: false,
								confirmText: this.$t('是'),
							})
							return false;
						}
						return
					}
				})
			},
			// 即时沟通
			handeleCommunicate(item) {
				createC2CConversation(item.release_user.mobile, this)
			},
			// 获取数据
			getData(init) {
				let userID = uni.getStorageSync('user_id');
				if (userID == '') {
					uni.showToast({
						title: this.$t('请先登录'),
						icon: 'none'
					})
					setTimeout(() => {
						uni.navigateTo({
							url: '/pages/user/login/login'
						})
					}, 1000)
					return
				}
				if (init) {
					this.page = 1;
				}
				uni.showLoading({
					title: this.$t('加载中')
				})

				this.$u.api.basic.forwarder_work({
					user_id: userID,
					page: this.page,
					type: this.itemIndex
				}).then(res => {
					this.total = res.count
					if (this.page == 1) {
						this.arr = res.list
					} else {
						this.arr = [...this.arr, ...res.list]
					}
					this.freshIsShow = false
					uni.hideLoading()
				})
			},

			// 下拉刷新复位
			store() {
				this.freshIsShow = false
			},
			// 下拉刷新触发
			fresh() {
				this.freshIsShow = true
				this.getData(true)
			},
			// 触底加载
			lower() {
				// 触底判断总条数不等于当前数据的条数则获取数据
				if (this.total != this.arr.length) {
					this.page++
					this.getData()
				}
			},
			// 不感兴趣
			handeleUninterested(item, index) {
				console.log(item, index);
				uni.showModal({
					title: this.$t('提示'),
					content: this.$t('确认忽略？将无法找回此信息。'),
					confirmText: this.$t('确认'),
					cancelText: this.$t('取消'),
					success: res => {
						if (res.confirm) {
							let data = {
								id: item.id,
								content: '',
								reason: ''

							}
							this.$u.api.basic.setRefuse(
								data
							).then(res => {
								this.arr.splice(index, 1)
								uni.showToast({
									icon: 'none',
									title: this.$t('操作成功')
								})
							})
						} else if (res.cancel) {}
					}
				});

			},

		},

	}
</script>

<style scoped>
	.role-tag {
		background-color: #66b1f9;
		color: #fff;
		font-size: 22rpx;
		padding: 6rpx 20rpx;
		border-radius: 50rpx;
		margin-top: 10rpx;
	}

	.flex {
		display: flex;
		align-items: center;
	}

	.ov {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.Currently-unavailable {
		width: 100%;
		height: 200rpx;
		text-align: center;
		line-height: 200rpx;
	}

	.textBlock {
		font-size: 26rpx;
		color: #1D1D1D;
		margin-top: 16rpx;
	}

	.textBlock_ru1 {
		font-size: 23rpx;
		color: #1D1D1D;
		margin-top: 16rpx;
		line-height: 0.8;
		text-align: center;
		margin-bottom: -18rpx;
	}

	.textBlock_ru {
		font-size: 23rpx;
		color: #1D1D1D;
		margin-top: 16rpx;
		line-height: 0.8;
		text-align: center;

	}

	.item-buts {
		width: 315rpx;
		height: 60rpx;
		border-radius: 60px;
		background: #5282E6;
		box-shadow: 0px 3.97px 9.92px 0px rgba(0, 76, 255, 0.3);
		font-size: 24rpx;
		color: #FFFFFF;
		text-align: center;
		line-height: 60rpx;
	}

	.item-buts-active {
		width: 315rpx;
		height: 60rpx;
		border-radius: 60px;
		font-size: 24rpx;
		color: #000000;
		text-align: center;
		line-height: 60rpx;
	}

	.index1_hycy {
		z-index: 2;
		width: 690rpx;
		height: 80rpx;
		border-radius: 80px;
		background: #FFFFFF;
		padding: 10rpx 20rpx 10rpx 20rpx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-top: 28rpx;
		margin-bottom: 24rpx;
	}

	.index1_tjzy {
		color: #FFFFFF;
		z-index: 2;
		margin-top: 40rpx;
		width: 690rpx;
		height: 32rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.index1_ck_flex {
		display: flex;
		flex-direction: column;
		align-items: center;
		flex-shrink: 0;
		flex: 1;
	}

	.btn-name {
		word-break: break-word;
	}

	.index1_ck_imgblock {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 70rpx;
		height: 70rpx;
		border-radius: 16rpx;
		background: rgba(255, 255, 255, 0.5);
		backdrop-filter: blur(10px);
		box-shadow: 0px 7px 8px 0px rgba(82, 130, 230, 0.5);
	}

	.index1_ck {
		display: flex;
		align-items: flex-start;
		justify-content: space-between;
		padding: 30rpx;
		box-sizing: border-box;
		z-index: 2;
		margin-top: 50rpx;
		width: 690rpx;
		height: 174rpx;
		border-radius: 32rpx;
		background: linear-gradient(0deg, rgba(255, 255, 255, 0.96) 0%, rgba(255, 255, 255, 0.192) 100%);
	}

	.list_block {
		width: 690rpx;
		height: calc(100vh - 610rpx);
	}

	.scroll-Y {
		width: 690rpx;
		height: 100%
	}

	.index1_myyunshu {
		font-size: 30rpx;
		color: #FFFFFF;
		position: absolute;
		top: 30rpx;
		left: 30rpx;
	}

	.yunshu_images1 {
		width: 345rpx;
		height: 185rpx;
		position: relative;
		left: -13rpx;
		top: -10rpx;
	}

	.yunshu_images2 {
		width: 314rpx;
		height: 158rpx;
		position: relative;
		left: 0;
		top: 0rpx;
	}

	.index1_message {
		width: 690rpx;
		display: flex;
		align-items: center;
		z-index: 2;
		color: #FFFFFF;
		margin-bottom: 24rpx;
		margin-top: 40rpx;
		font-size: 32rpx;
		letter-spacing: 3rpx;
	}

	.index1_yunshu1 {
		width: 314rpx;
		height: 158rpx;
		border-radius: 24rpx;
		position: relative;
	}

	.index1_yunshu {
		width: 690rpx;
		height: 158rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		z-index: 2;
		margin-top: 50rpx;
	}

	.index1_headers1 {
		width: 450rpx;
		height: 100rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		margin-left: 16rpx;
	}

	.index1_headers {
		width: 690rpx;
		height: 100rpx;
		display: flex;
		align-items: center;
		margin-top: 84rpx;
		z-index: 2;
	}

	.header {
		width: 750rpx;
		height: 792rpx;

	}

	.index1_goods2_block {
		min-height: 66rpx;
		width: 169rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.index1_goods2_block1 {
		min-height: 66rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.index1_goods2 {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-top: 24rpx;
	}

	.index1_goods1 {
		color: #999999;
		font-size: 22rpx;
		margin-top: 22rpx;
	}

	.index1_xq4 {
		position: absolute;
		bottom: -24rpx;
		left: 30rpx;
		width: 630rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: 22rpx;
	}

	.index_xq1 {
		width: 196rpx;
		height: 60rpx;
		background: #FF5D5D;
		border-radius: 60rpx;
		color: #FFFFFF;
		text-align: center;
		line-height: 60rpx;
	}

	.index_xq2 {
		width: 196rpx;
		height: 60rpx;
		background: #5282E6;
		border-radius: 60rpx;
		color: #FFFFFF;
		text-align: center;
		line-height: 60rpx;
	}

	.index_xq3 {
		width: 196rpx;
		height: 60rpx;
		background: #06C36E;
		border-radius: 60rpx;
		color: #FFFFFF;
		text-align: center;
		line-height: 60rpx;
	}

	.index1_goods {
		width: 630rpx;
		min-height: 240rpx;
		background: #F6F7FB;
		border-radius: 32rpx;
		padding: 30rpx;
		box-sizing: border-box;
		margin-top: 24rpx;
	}

	.index1_order1 {
		height: 22rpx;
		border-radius: 22rpx;
		padding: 0 16rpx;
		background: #F32929;
		color: #FFFFFF;
		font-size: 16rpx;
		box-sizing: border-box;
		text-align: center;
		line-height: 22rpx;
	}

	.index1_order {
		width: 630rpx;
		min-height: 200rpx;
		border-radius: 32rpx;
		padding: 30rpx 30rpx 17rpx 30rpx;
		box-sizing: border-box;
		background: #F6F7FB;
		margin-top: 30rpx;

	}

	.index1_images5 {
		min-width: 118rpx;
		height: 40rpx;
		background: #06C36E;
		color: #FFFFFF;
		font-size: 22rpx;
		line-height: 40rpx;
		text-align: center;
		border-radius: 40rpx;
		box-sizing: border-box;
		padding: 0 12rpx;

	}

	.index1_images4 {
		min-width: 118rpx;
		height: 40rpx;
		background: #5282E6;
		color: #FFFFFF;
		font-size: 22rpx;
		line-height: 40rpx;
		text-align: center;
		border-radius: 40rpx;
		box-sizing: border-box;
		padding: 0 12rpx;
	}

	.index1_images3 {
		width: 205rpx;
		height: 100rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: flex-end;
	}

	.index1_imagescx2 {
		height: 31rpx;
		border-radius: 31rpx;
		background-color: #F32929;
		font-size: 22rpx;
		color: #FFFFFF;
		box-sizing: border-box;
		display: inline-block;
		padding: 0 10rpx;
		text-align: center;
		line-height: 31rpx;
	}

	.index1_images1 {
		width: 319rpx;
		min-height: 100rpx;
		margin-left: 16rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		align-items: flex-start;
	}

	.index1_images {
		width: 100%;
		min-height: 100rpx;
		display: flex;
		align-items: center;
	}

	.index1_block {
		width: 690rpx;
		border-radius: 32rpx;
		background-color: #FFFFFF;
		padding: 30rpx 30rpx 54rpx 30rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		position: relative;
		z-index: 2;
		margin-bottom: 70rpx;
	}

	.index1_content {
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		background-color: #F1F2F4;
	}

	page {
		background-color: #F1F2F4;
	}
</style>